<template>
  <div>
    <div class="warp">
      <h1>Home</h1>
      <router-link to="/home/music/1/3min">中文歌</router-link>
      <router-link to="/home/music/2/3min">纯音乐</router-link>
      <router-link to="/home/music/3/3min">动漫歌曲</router-link>
      <router-link to="/home/games/?title=塞尔达&version=旷野之息"
        >game1</router-link
      >
      <router-link to="/home/games/?title=火焰纹章&version=风花雪月"
        >game2</router-link
      >
      <router-link to="/home/news">news</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  // beforeCreate() {
  //   console.log("~~~~~~~~~~~~~beforeCreate~~~~~~~~~~~~~");
  // },
  // created() {
  //   console.log("~~~~~~~~~~~~~created~~~~~~~~~~~~~");
  // },
  // beforeMount() {
  //   console.log("~~~~~~~~~~~~~beforeMount~~~~~~~~~~~~~");
  // },
  // mounted() {
  //   console.log("~~~~~~~~~~~~~mounted~~~~~~~~~~~~~");
  // },
  // beforeUpdate() {
  //   console.log("~~~~~~~~~~~~~beforeUpdate~~~~~~~~~~~~~");
  // },
  // updated() {
  //   console.log("~~~~~~~~~~~~~updated~~~~~~~~~~~~~");
  // },
  // beforeDestroy() {
  //   console.log("~~~~~~~~~~~~~beforeDestroy~~~~~~~~~~~~~");
  // },
  // destroyed() {
  //   console.log("~~~~~~~~~~~~~destroy~~~~~~~~~~~~~");
  // },
};
</script>

<style>
div.warp a {
  overflow: hidden;
  text-decoration: none;
  margin: 0 10px;
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: rgb(222, 246, 255);
  border-radius: 10px;
  text-align: center;
  border: 1px solid #3cf;
  line-height: 30px;
  font-weight: bold;
  color: #000;
}
div.warp a:hover {
  background-color: rgb(117, 176, 254);
  color: #fff;
}
div.warp a:active {
  font-size: 18px;
}
</style>
